<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tab{width:480px;height:400px;border: solid 1px black;margin: 0 auto;position: relative;}

        .tab .btns{height:40px;display: flex;position: absolute;left:0;right:0;justify-content: center;align-items: center;bottom:0;}
        .tab .btns span{cursor: pointer;background: pink;border-radius: 50%;width:20px;height:20px;margin: 0 20px;}
        .tab .btns span.active{background: red;}
        

        .tab .conts .cont{width:480px;height:400px;color: #fff;font-size: 50px;display:none}
        .tab .conts .cont:nth-child(1){background: #399;}
        .tab .conts .cont:nth-child(2){background: #393;}
        .tab .conts .cont:nth-child(3){background: #993;}
        .tab .conts .cont:nth-child(4){background: #933;}
        .tab .conts .cont:nth-child(5){background: #939;}
        .tab .conts .cont:nth-child(6){background: #339;}

    </style>
</head>
<body>
    <div class="tab">
        <div class="conts">
            <div class="cont"></div>
            <div class="cont"></div>
            <div class="cont"></div>
            <div class="cont"></div>
            <div class="cont"></div>
            <div class="cont"></div>
        </div>
        <div class="btns">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
<script>

    var btns = document.querySelectorAll(".btns span");
    var conts = document.querySelectorAll(".conts .cont");

    var index = 0;
    btns[index].className = "active";
    conts[index].style.display = "block";

    // 使用forEach遍历所有元素
    // 优势：不用自己给元素绑定索引，forEach的回调函数自带索引参数
    // 这个索引参数，在事件内，依然可以获取
    Array.from(btns).forEach(function(val, idx){
        val.onclick = function(){
            btns[index].className = "";
            conts[index].style.display = "none";

            conts[idx].style.display = "block";
            val.className = "active";

            index = idx;
        }
    });

    
</script>
</html>